<template>
  <!-- 首页 -->
  <div id="index-box">
    <!-- <div id="header"></div> -->
    <div id="index-left">
      <div id="left-head"></div>
      <el-menu :collapse="true" style="min-height: 630px;border: none;" default-active="2" class="el-menu-vertical-demo"
        @open="handleOpen" @close="handleClose" background-color="#606060" text-color="#ffffff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-shopping-cart-2"></i>
            购货
          </template>
          <el-menu-item-group title="采购单据">
            <el-menu-item index="1-1">购货申请</el-menu-item>
            <el-menu-item index="1-2">购货单</el-menu-item>
            <el-menu-item index="1-3">购货退货单</el-menu-item>
            <el-menu-item index="1-4">已销订购看板</el-menu-item>
            <el-menu-item index="1-5">采购发票登记</el-menu-item>
            <el-menu-item index="1-6">采购历史价跟踪</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="采购报表">
            <el-menu-item index="1-7">采购订单追踪表</el-menu-item>
            <el-menu-item index="1-8">采购明细表</el-menu-item>
            <el-menu-item index="1-9">采购付款一览表</el-menu-item>
            <el-menu-item index="1-10">采购订单变更表</el-menu-item>
          </el-menu-item-group>
          <!-- <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu> -->
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-sold-out"></i>
            销货
          </template>
          <el-menu-item-group title="销售单据">
            <el-menu-item index="2-1">报价单</el-menu-item>
            <el-menu-item index="2-2">销货订单</el-menu-item>
            <el-menu-item index="2-3">销货单</el-menu-item>
            <el-menu-item index="2-4">销货退货单</el-menu-item>
            <el-menu-item index="2-5">销售发票登记</el-menu-item>
            <el-menu-item index="2-6">物流服务</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="销售报表">
            <el-menu-item index="2-7">销售订单跟踪表</el-menu-item>
            <el-menu-item index="2-8">销售明细表</el-menu-item>
            <el-menu-item index="2-9">销售汇总</el-menu-item>
            <el-menu-item index="2-10">销售收款一览表</el-menu-item>
            <el-menu-item index="2-11">销售利润表</el-menu-item>
            <el-menu-item index="2-12">销售订单变更表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-house"></i>
            仓库
          </template>
          <el-menu-item-group title="仓库单据">
            <el-menu-item index="3-1">调拨单</el-menu-item>
            <el-menu-item index="3-2">其他入库单</el-menu-item>
            <el-menu-item index="3-3">其他出库单</el-menu-item>
            <el-menu-item index="3-4">成本调整单</el-menu-item>
            <el-menu-item index="3-5">组装单</el-menu-item>
            <el-menu-item index="3-6">拆卸单</el-menu-item>
            <el-menu-item index="3-7">组装拆卸模版</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="仓库报表">
            <el-menu-item index="3-8">商品库存余额表</el-menu-item>
            <el-menu-item index="3-9">商品收发明细表</el-menu-item>
            <el-menu-item index="3-10">商品收发汇总表</el-menu-item>
            <el-menu-item index="3-11">其他出入库明细表</el-menu-item>
            <el-menu-item index="3-12">序列号跟踪表</el-menu-item>
            <el-menu-item index="3-13">序列号状态表</el-menu-item>
            <el-menu-item index="3-14">批次保质期清单</el-menu-item>
            <el-menu-item index="3-15">批次跟踪表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-wallet"></i>
            资金
          </template>
          <el-menu-item-group title="资金单据">
            <el-menu-item index="4-1" @click="goto('Rceipt')">收款表</el-menu-item>
            <el-menu-item index="4-2" @click="goto('Will')">预收款单</el-menu-item>
            <el-menu-item index="4-3" @click="goto('Pay')">付款单</el-menu-item>
            <el-menu-item index="4-4" @click="goto('WriteOff')">核销单</el-menu-item>
            <el-menu-item index="4-5" @click="goto('OtherIn')">其他收入单</el-menu-item>
            <el-menu-item index="4-6">其他支出单</el-menu-item>
            <el-menu-item index="4-7">采购销售费用清单</el-menu-item>
            <el-menu-item index="4-8">资金转账单</el-menu-item>
            <el-menu-item index="4-9">在线收款明细</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="资金报表">
            <el-menu-item index="4-10">现金银行报表</el-menu-item>
            <el-menu-item index="4-11">应付款明细表</el-menu-item>
            <el-menu-item index="4-12">应收款明细表</el-menu-item>
            <el-menu-item index="4-13">应付款汇总表</el-menu-item>
            <el-menu-item index="4-14">应收款汇总表</el-menu-item>
            <el-menu-item index="4-15">客户对账单</el-menu-item>
            <el-menu-item index="4-13">应付款汇总表</el-menu-item>

          </el-menu-item-group>
          <el-menu-item-group title="资金报表">
            <el-menu-item index="4-14">应收款汇总表</el-menu-item>
            <el-menu-item index="4-15">客户对账单</el-menu-item>
            <el-menu-item index="4-16">供应商对账单</el-menu-item>
            <el-menu-item index="4-17">其他收支明细表</el-menu-item>
            <el-menu-item index="4-18">利润表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-goods"></i>
            商品
          </template>
          <el-menu-item-group title="商品资料">
            <el-menu-item index="5-1">商品</el-menu-item>
            <el-menu-item index="5-2">计量单位</el-menu-item>
            <el-menu-item index="5-3">商品类别</el-menu-item>
            <el-menu-item index="5-4">辅助属性</el-menu-item>
            <el-menu-item index="5-5">品牌</el-menu-item>
            <el-menu-item index="5-6">商品货架</el-menu-item>
            <el-menu-item index="5-7">客户物料编码</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="商品价格">
            <el-menu-item index="5-8">商品价格本</el-menu-item>
            <el-menu-item index="5-9">商品价格变更表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-folder"></i>
            资料
          </template>
          <el-menu-item-group title="基础资料">
            <el-menu-item index="6-1" @click="goto('Client')">客户</el-menu-item>
            <el-menu-item index="6-2" @click="goto('Provider')">供应商</el-menu-item>
            <el-menu-item index="6-3" @click="goto('StoreHome')">仓库</el-menu-item>
            <el-menu-item index="6-4" @click="goto('Employee')">职员</el-menu-item>
            <el-menu-item index="6-5" @click="goto('Account')">账户</el-menu-item>
            <el-menu-item index="6-6" @click="goto('ClientLevel')">客户等级</el-menu-item>
            <el-menu-item index="6-7" @click="goto('Area')">地区</el-menu-item>
            <el-menu-item index="6-8" @click="goto('Depart')">部门</el-menu-item>
            <el-menu-item index="6-9" @click="goto('Address')">发货地址</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="辅助资料">
            <el-menu-item index="6-10">客户类别</el-menu-item>
            <el-menu-item index="6-11">供应商类别</el-menu-item>
            <el-menu-item index="6-12">支出类别</el-menu-item>
            <el-menu-item index="6-13">收入类别</el-menu-item>
            <el-menu-item index="6-14">结算方式</el-menu-item>
            <el-menu-item index="6-15">单据编码规则</el-menu-item>
            <el-menu-item index="6-16">线路</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div id="index-right">
      <div class="right-top">
        <Navigate />
      </div>
      <div class="right-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import Navigate from '@/information/Navigate.vue';
export default {
  name: "Index",
  components: {
    Navigate
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goto(to) {
      this.$router.push(to)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}


a {
  text-decoration: none;
  color: #ffffff;
}

#index-box {
  width: calc(100%);
  height: 100%;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
  background-color: #606060;

}

.el-submenu {
  width: 120px;
}

.el-menu--collapse>.el-submenu>.el-submenu__title [class^=el-icon-] {
  color: #ffffff;
  font-size: 17px;
  position: relative;
  right: -5px;
}

#index-left {
  float: left;
  height: 100%;
}


.el-menu-item-group .el-menu-item {
  font-size: 13px;
  height: 45px;
  line-height: 45px;
}


.el-menu-item-group {
  float: left;
  padding-left: 40px;
  padding-right: 60px;
}

#left-head {
  width: 100px;
  height: 70px;
  background-image: url(../assets/image/logo.png);
  background-size: 140px;
  background-position-x: -10px;
  background-position-y: center;
  background-repeat: no-repeat;
}

#index-right {
  float: right;
  width: calc(100% - 120px);
  /* min-height: 700px; */
  height: 100%;
  border-radius: 15px;
  background-color: white;
  overflow: scroll;
}

.el-menu-item-group .el-menu-item-group__title {
  color: #2fbaff;
}

.right-top {
  width: 98%;
  height: 100px;
  /* background-color: gray; */
  /* border: 1px solid gray; */
}

.right-content {
  width: 98%;
  height: 600px;
  /* border: 1px solid gray; */
}


.right-top,
.right-content {
  margin: auto
}
</style>